import React from 'react';
// 引入axios
// import axios from 'axios'
// 代理商连接
import { connect } from 'react-redux';

import {request} from '../../utils/request'

// 引入导航条组件
import { NavBar, Icon, Toast } from 'antd-mobile';
// 引入局部样式
import Styles from './index.module.scss'

// import ReactList from '../../demo/CityList'
import { List } from 'react-virtualized';
class CitySelect extends React.Component {
  state = { 
    finallList:[],
    leftList:[],
    currentIndex:0
   }
  //  页面初始化的时候绑定元素的ref
   constructor(){
     super();
     this.ListRef = React.createRef()
   }
async componentDidMount(){
  // console.log(this.ListRef); 
    let finallList = []
    // 将当前的定位城市数据存放
    const city = this.props.cityName
    finallList.push({title:'当前城市',children:[{city}]})
    // 获取热门城市数据
    const cityList =  (await (request.get('/area/hot'))).data.body
    // console.log(res.data.body);
    finallList.push({title:'热门城市',children:cityList.map(item =>(
      {city:item.label}
    ))
  }) 
    // console.log(finallList);
    // 获取全部城市
   const hotCity = (await request.get('/area/city?level=1')).data.body
    // console.log(res.data.body); 
      // 使用sort将数据从小排到大
      const allcity = hotCity.sort((a,b)=>{
        return a.short > b.short ? 1 : -1
      })
      // console.log(allcity);
      // 将城市里面的简称首字母变成大写
      allcity.forEach(item=>{
        // 拿到首字母
        const firstLetter = item.short.charAt(0).toUpperCase()
        // 判断首字母是否有编组
        const index = finallList.findIndex(item => item.title === firstLetter)
        if(index === -1){
          // 索引为-1就是没有
          finallList.push({
            title:firstLetter,
            children:[{city:item.label}]
          })
        }else{
          finallList[index].children.push({city:item.label})
        }
      })
    // console.log(finallList);
    // 页面加载完毕之后数据可能还没请求回来 除了可以先用一个定时器之外 还可以将异步请求变同步请求
    // setTimeout(() => {
    //   this.setState({
    //     finallList
    //   })
    //   console.log(this.state.finallList);
    // }, 200);
    // 获取我们想要的数据格式
    const leftList = finallList.map(item => {
      return item.title
    })
    leftList.splice(0,2,'#','热')
    // console.log(leftList); 
      this.setState({
        finallList,
        leftList
      })
      // 页面加载完毕时精确测量每一行的高度 measureAllRows是组件里面的方法
      this.ListRef.current.measureAllRows()
  }
  // 点击事件获取城市信息 切换回上一页
  addCity = (city) => {
    const {finallList} = this.state
    // console.log(city);
    // 后台只有热门城市有房源信息 所以我们只能选择热门城市 如果点击到其他的城市则是要弹出用户提示
    // 如果当前点击的城市里面在热门城市列表有 我们就能切换回上一页
    // console.log(finallList);
    const index = finallList[1].children.findIndex(item => item.city === city)
    // console.log(index);
    if(index === -1){
      // alert('该城市暂时无房源,请换一个城市呢亲!')
      // 使用轻提示组件
      Toast.info('该城市暂时无房源,请换一个城市呢亲!')
    }else{
      // console.log(123);
      // 将当前的城市名称获取
      this.props.changeCity(city)
      // 获取城市后返回上一个页面
      this.props.history.goBack()
    }
    
  }
  rowRenderer = ({key, index, style}) =>{
    const {finallList} = this.state
    return (
      <div key={key} style={style} className={Styles.city_item}>
        <div className={Styles.city_title}>{finallList[index].title}</div>
         {
          //  给热门城市点击事件 切换回上一个页面 修改仓库数据为当前选择城市
           finallList[index].children.map((item,index) =>
           <div 
           className={Styles.city_name} 
           key={item.city}
           onClick={()=>{this.addCity(item.city)}}
           >
             {item.city}
           </div>
           )
         }
      </div>
    )
  }
  onRowsRendered = ({startIndex}) => {
    if(this.state.currentIndex === startIndex) return
    // 每次滚动的时候 list 插件内部就会触发一次回调 里面的参数是可视区域子元素的索引
    // 将可视区域的首个子元素的索引赋值给 currentIndex 这样 active 能随之改变
    this.setState({
      currentIndex:startIndex
    })
  }
  rowHeight = ({index}) => {
    // console.log(index);
    const {finallList} = this.state
    return finallList[index].children.length * 50 + 50
  }
  changeIndex = (index) => {
    // console.log(this.ListRef);
    // 使用ref属性操作组件的方法
    this.ListRef.current.scrollToRow(index)
    // console.log(index);
    // 点击每一个子元素改变对应的index
    this.setState({
      currentIndex:index
    })
  }
  render() { 
    const {finallList,leftList,currentIndex} = this.state
    return ( 
      <div className={Styles.city_select}>
      <NavBar
      mode="light"
      icon={<Icon type="left" />}
      onLeftClick={() => this.props.history.goBack()}
    >城市选择</NavBar>
    <div className={Styles.city_list}>
    {/* // 核心组件 */}
      <List
        // 宽度 - Number
        width={window.screen.width}
        // 高度 - Number
        height={window.screen.height - 45}
        // 行数 - Number
        rowCount={finallList.length}
        // 行高度  - Number / Function 
        rowHeight={this.rowHeight}
        // 行渲染 - Function - 负责呈现一行
        rowRenderer={this.rowRenderer}
        // 当行渲染时候的回调函数
        onRowsRendered={this.onRowsRendered}
        // 每一行的对齐方式 可选值有 auto start center
        scrollToAlignment="start"
        // scrollToIndex={currentIndex}
        // react操作元素的方法
        ref={this.ListRef}
      />
    </div>
    <div className={Styles.left_list}>
      {
        leftList.map((item,index) => (
          <div key={item} onClick={()=>this.changeIndex(index)} className={Styles.left_item}>
            {/* 当前 currentIndex 等于元素的index时候就加上样式 */}
            <span className={currentIndex === index ? Styles.active : ''}>{item}</span>
          </div>
        ))
      }
    </div>
    </div>
     );
  }
}
// 将action操作数据的方法绑定到组件的props上 修改仓库数据
 const mapDispatchToProps = (dispatch) => ({
      changeCity : (city) =>{
        const action = {
          type:'change_city',
          value:{
            city
          }
        }
        // 修改仓库数据
        dispatch(action)
      }
 })
 const mapStateToProps = (state) => ({
    cityName:state.address.city
 })
export default connect(mapStateToProps,mapDispatchToProps)(CitySelect);